<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.box{
    width: 400px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #000;
}
.demo{
    width: 1200px;
    /* height: 200px; */
    margin: 0 auto;
    animation: lunbo 5s  infinite alternate;
}
.boxone{
    width: 400px;
    height: 200px;
    float: left;
    background-color: yellow;
    display: flex;
    font-size: 50px;
    justify-content: center;
    align-items: center;
}
.boxtwo{
    width: 400px;
    height: 200px;
    float: left;
    background-color: blue;
    display: flex;
    font-size: 50px;
    justify-content: center;
    align-items: center;
}
.boxtree{
    width: 400px;
    height: 200px;
    float: left;
    background-color: greenyellow;
    display: flex;
    font-size: 50px;
    justify-content: center;
    align-items: center;
}

@keyframes lunbo {
    0%,30%{
        margin-left: 0px;
    }
    40%,70%{
        margin-left: -400px;
    }
    80%,100%{
        margin-left: -1200px;
    }
    
}
</style>
<body>
    <div class="box">
        <div class="demo">
            <div class="boxone">yellow</div>
            <div class="boxtwo">blue</div>
            <div class="boxtree">greenyellow</div>
        </div>
        
    </div>
    
</body>
</html>